<template>
  <a-modal v-model:open="visible" title="设置原厂条码解析格式" @close="onClose" @ok="saveParseTemp">
    <a-form ref="formRef" :label-col="{ span: 4 }" :model="state.parseFormat" :rules="state.rule">
      <a-form-item label="分隔符号" name="segmentSymbol">
        <a-input v-model:value="state.parseFormat.segmentSymbol" placeholder="分隔符号" style="width: 100%" />
      </a-form-item>
      <a-form-item label="内容顺序" name="contentOrderArr">
        <DictSelect
          v-model:value="state.parseFormat.contentOrderArr"
          :mode="'tags'"
          dict-code="ORI_FACTORY_FIELD"
          placeholder="内容顺序"
          width="100%"
        />
      </a-form-item>
      <a-form-item label="测试内容" name="testContent">
        <a-input v-model:value="state.parseFormat.testContent" placeholder="测试内容" style="width: 100%" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
  import { reactive, ref } from 'vue';
  import DictSelect from '/@/components/support/dict-select/index.vue';
  import { message } from 'ant-design-vue';
  import { customerInfoApi } from '/@/api/business/basic/customer/customer-info-api.js';
  import { smartSentry } from '/@/lib/smart-sentry.js';
  import { SmartLoading } from '/@/components/framework/smart-loading/index.js';

  const visible = ref(false);
  const formRef = ref();

  const state = reactive({
    parseFormat: {
      belongCustomerCode: '',
      segmentSymbol: '|',
      contentOrderArr: [],
      testContent: '',
      contentOrder: '',
    },
    rule: {
      segmentSymbol: [{ required: true, message: '请输入 分隔符号' }],
      contentOrderArr: [{ required: true, message: '请输入 内容顺序' }],
    },
  });

  function onClose() {
    visible.value = false;
  }

  function show(customerCode) {
    visible.value = true;
    state.parseFormat.belongCustomerCode = customerCode;
    customerInfoApi.getParseOriFacBarcode(state.parseFormat.belongCustomerCode).then((res) => {
      state.parseFormat.segmentSymbol = res.data.segmentSymbol;
      state.parseFormat.testContent = res.data.testContent;
      state.parseFormat.contentOrder = res.data.contentOrder;
      state.parseFormat.contentOrderArr = JSON.parse(res.data.contentOrder);
    });
  }

  async function saveParseTemp() {
    try {
      await formRef.value.validateFields();
      try {
        SmartLoading.show();
        state.parseFormat.contentOrder = JSON.stringify(state.parseFormat.contentOrderArr);
        await customerInfoApi.setParseOriFacBarcode(state.parseFormat);
        message.success('操作成功');
        onClose();
      } catch (err) {
        smartSentry.captureError(err);
      } finally {
        SmartLoading.hide();
      }
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!');
    }
  }

  defineExpose({
    show,
  });
</script>

<style scoped lang="less"></style>
